<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/reveal.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <header></header>
    <div class="nav_main"></div>
    <div class="present-view">
        <div class="nav_left">
            <p data-toggle="collapse" data-target="#nav-left-link">信息披露
                <span class="caret"></span>
            </p>
            <div id="nav-left-link" class="panel-collapse collapse in">
                <a href="present.html">公司介绍</a>
                <a href="scale.html" class="active">平台规模</a>
                <a href="management.html">风控措施</a>
                <a href="legend.html">客户借款</a>
                <a href="circulate.html">借还情况</a>
            </div>
        </div>
        <div class="scale-content-view content-view">
            <h4 class="view-top">平台规模</h4>
            <h4 class="view-title">平台规模</h4>
            <!-- <p class="view-list">最新数据</p> -->
            <div id="scale-bar" style="width:915px;height:610px"></div>
            <ul class="scale-bar-legend">
                <li>
                    <p>注册用户数</p>
                    <span>50837人</span>
                </li>
                <li>
                    <p class="legend-active">活跃用户</p>
                    <span>50837人</span>
                </li>
                <li>
                    <p class="legend-lend-out">出借人数</p>
                    <span>50837人</span>
                </li>
                <li>
                    <p class="legend-lend-in">借款用户</p>
                    <span>50837人</span>
                </li>
            </ul>
            <h4 class="view-title">累计借贷交易</h4>
            <ul class="add-up">
                <li>
                    <p class="list-num">40,369,094,958元</p>
                    <p class="list-text">借款项目总金额</p>
                </li>
                <li>
                    <p class="list-num">123笔</p>
                    <p class="list-text">成交借款项目总笔数</p>
                </li>
                <li>
                    <p class="list-num">40,369元</p>
                    <p class="list-text">每笔评价借款金额</p>
                </li>
                <li>
                    <p class="list-num">40,369元</p>
                    <p class="list-text">个人每笔评价借款金额</p>
                </li>
                <li>
                    <p class="list-num">40,369元</p>
                    <p class="list-text">机构每笔评价借款金额</p>
                </li>
            </ul>
            <h4 class="view-title">未偿还借贷交易</h4>
            <ul class="dot-list">
                <li>
                    <p class="list-num">4,958元</p>
                    <p class="list-text">借款本金金额</p>
                </li>
                <li>
                    <p class="list-num">12笔</p>
                    <p class="list-text">还借款月对应借款笔数</p>
                </li>
                <li>
                    <p class="list-num">4,958元</p>
                    <p class="list-text">还借款每笔平均借款余额</p>
                </li>
                <li>
                    <p class="list-num">4,958元</p>
                    <p class="list-text">个人每笔平均借款余额</p>
                </li>
                <li>
                    <p class="list-num">4,958元</p>
                    <p class="list-text">机构每笔平均借款余额</p>
                </li>
                <li>
                    <p class="list-num">12期</p>
                    <p class="list-text">未偿还借款平均借款期限</p>
                </li>
                <li>
                    <p class="list-num">4,958元</p>
                    <p class="list-text">未偿还借款平均出借金额</p>
                </li>
            </ul>
        </div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById("scale-bar"));
        var option = {
            title: {
                text: "最新数据",
                textStyle: {
                    fontWeight: "bold"
                },
                padding: [0, 0, 0, 5],

            },
            legend: {
            },
            tooltip: {
                trigger: "axis"
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['借款人数', '出借人数', '活跃用户', '注册用户数']
            },
            series: [
                {
                    // name:"借款人数",
                    type: 'bar',
                    data: [
                    {value:400,name:"借款人数"},
                    {value:600,name:"出借人数"},
                    {value:800,name:"活跃人数"},
                    {value:1000,name:"注册用户数"}
                    ],
                    //'借款人数', '出借人数', '活跃用户', '注册用户数'
                    barMaxWidth: "28",
                    color: function (params) {
                        var colorList = ['#fbd437', '#f2637b', '#36cbcb', '#3aa1ff'];
                        return colorList[params.dataIndex]
                    }

                }
            ]
        }
        myChart.setOption(option)
    </script>
</body>

</html>